با یکی دیگر از آموزشهای طراحی بنر تبلیغاتی برای وب سایت ، در خدمت شما بازدید کنندگان عزیز هستم .

تمام بنرهایی که تا به حال آموزش داده ام به صورت افقی و برای Content صفحات وب طراحی شده بود .

امروز می خواهم یک بنر که بیشتر برای طرفین قالب مورد استفاده قرار می گیرد را طراحی کنم .

ابعاد این بنر به صورت استاندارد 240×120 با فرمت Gif می باشد . امیدوارم از این آموزش لذت ببرید .

 

پیش نیاز : آموزش مقدماتی فتوشاپ

فتوشاپ را اجرا کنید

1. یک صفحه به ابعاد 240×120 میلیمتر با رزولیشن 72 ایجاد کنید .

2. بر روی لایه کادر کشیده شده دابل کلیک کرده و تنظیمات گزینه Gradient Overlay را تغییر بدهید .

3. بعد از تغییر رنگ پس زمینه ، با ابزار Rounded Rectangle Tool یک کادر میکشم . درصد رنگی کادر کشیده شده : d7d7d7 | بعد از کشیدن کادر مورد نظر روی لایه آن دابل کلیک کرده و تنظیمات پیش فرض گزینه های مورد نظر را تغییر بدهید .

4. یک کادر دیگه همانند کادر بالا میکشم

بر روی لایه کادر کشیده شده دابل کلیک کرده و تنظیمات پیش فرض را با توجه به تصویر زیر تغییر بدهید

5. یک دایره کوچک با درصد رنگی c0c1c2 کشیده و روی لایه دایره کشیده شده دابل کلیک کنید و تنظیمات گزینه inner shadow را تغییر بدهید

6. در مرحله بعدی هم سه کادر دیگه میکشم و سه آیکون که از اینترنت دانلود کرده ام را در گوشه کادر قرار میدهم . تنظیمات در تصویر زیر مشخص شده است .درصد رنگی کادر کشیده شده برابر است با : d7d7d7

7 . نوبت میرسه به تایپ متن در کادرهایی که تا این مرحله کشیده ام . دقت داشته باشید که بعد از تایپ متن باید تمام قسمت های مربوط به یک کادر را با هم Marge کنیم . یعنی اگر داخل بک کادر یک آیکون با یک متن تایپ شده است ، با انتخاب کلید Ctrl از روی کیبرد هر 3 لایه را انتخاب کنیم و بعد از آن کلیدهای Ctrl+E را از روی کیبرد بفشاریم تا هر سه لایه تبدیل به یک لایه شود .

شروع کار با پنل انیمیشن

8. پنل انیمیشن را از مسیر Window = > Animation فعال کنید تا کادر تنظیمات آن در پایین صفحه ظاهر شود .

9. در پایین صفحه کادر انیمیشن را مشاهده می کنید . این پنل تشکیل شده است از : قسمت فریم ها / قسمت Forever و قسمت Playes Animation

10. انیمیشن بنر به این صورت هست که از آیکون آسا رایان بالای صفحه 4 کپی گرفته می شود . به تصویر زیر دقت کنید .

11. بعد از گرفتن کپی از لایه اول ابتدا لایه شماره 1 (1 از چهار ) را انتخاب کنید و فیلتر Blur > Motion Blur را با تنظیمات مشخص شده بر روی لایه اول اعمال کنید .

مرحله 11 را برای 2 لایه باقیمانده هم تکرار میکنم اما با تنظیمات دیگر . دقت داشته باشید که در هر مرحله باید لایه قبلی را غیر فعال کنید تا تغییرات را بدرستی مشاهده کنید

لایه چهارم باید بدون تغییر باشد

12. بعد از ایجاد لایه ها یک فریم جدید ایجاد میکنم و لایه اول را (مرحله 11) را فعال میکنم . زمانش را برابر با 0.2 قرار میدم .این مرحله را تا چهارمین لایه تکرار میکنم .

13. نوبت میرسه به کادر دوم . اول باید لایه کادر دوم را فعال کنیم و با حرکت ماوس به بالای صفحه انتقالش بدیم تا طی دو مرحله کم کم به جای خودش منتقلش کنیم . برای انجام اینکار به تصویر زیر دقت کنید . برای هر مرحله هم باید یک فریم ایجاد کنیم .

14. خوب نوبت میرسه به سه کادر پایین صفحه . این سه کادر باید با هر فریم فعال بشن و بعد از فعال شدن طی دو مرحله از سمت چپ کادر خارج بشن . به تصویر زیر دقت کنید

15. حالا باید 3 کادر پایین صفحه را با هم انتخاب کنیم و یک فریم جدید ایجاد و کمی 3 کادر را به طرف چپ حرکت بدیم . opacity را هم برابر با 50 درصد قرار میدهم . زمانها را تغییر دادم از روی تایم لاین تنظیم کنید

16. نوبت میرسه به کادر وسط صفحه . این کادر را هم طی 2 مرحله از بالای صفحه خارج میکنم

برای دانلود فایل PDF + PSDکلیک کنید || رمز فایل : www.asarayan.com
لینک دانلود فایل PDF + PSD :سرورمستقیم